<template>
  <div>
    <div class="chart" id="container"></div>
  </div>
</template>
<script>
//先导入charts
import Charts from '@jiaminghi/charts'
export default {
  
  data () {
    return {
  
    };
  },
  created(){
  },
  mounted(){
    (function(){
    //下面和eacharts差不多
      const container =document.getElementById('container')
      const myChart = new Charts(container)
      const option = {
        xAxis: {
          name: '2022',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          color:'#fff',
          nameTextStyle: {
            fill: '#fff',
            fontSize: 14
          },
          axisLabel:{
            style: {
              fill: '#fff',
              fontSize: 14,
              rotate: 0
            }
          },
        },
        yAxis: {
          name: '营业额',
          data: 'value',
          max:110000,
          nameTextStyle: {
            fill: '#fff',
            fontSize: 14
          },
          axisLabel:{
            style: {
              fill: '#fff',
              fontSize: 12,
              rotate: 0
            }
          },
        },
        series: [
          {
            name: '系列A',
            data: [82000, 72300, 99000, 81000, 75000, 82000, 99850],
            type: 'bar',
            stack: 'a',
            gradient: {
              color: ['#ce2626', '#eab026']
            },
          }
        ]
      }

      myChart.setOption(option)
      //图表自适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    })()
  },
  methods:{
  }
}
</script>
<style scoped lang="scss">
.chart{
    height: 280px;
    width:500px;
    margin-left: 10px;
  }
</style>
